import React from "react";

import {LoginOutlined, SettingOutlined, UserOutlined} from '@ant-design/icons';
import {Avatar, Badge, Col, Dropdown, Layout, Menu, Row, Space, Tooltip, Typography} from 'antd';
import BaseComponent from "../../redare/components/BaseComponent";
import {Link} from "react-router-dom";

const {Header} = Layout;

const {Text} = Typography;


export default class IndexHeader extends BaseComponent {


    constructor(props) {
        super(props);
        this.state = {
            userInfo: {},
            menuSelectKey: 'workbench',
            menuKeys: [
                {'key': '/form', 'name': "在线表单"}
            ]
        };
        // console.log(window.location.path);
    }

    componentDidMount() {
        this._initActiveMenu();
    }

    loginOut() {
        this.workbenchPresenter.loginOut(
            {},
            () => {
                window.location.href = window._ctx + "/login?backUrl=" + window.location.href;
            }
        );
    }

    onMenuClick = ({item, key}) => {
        this.setState({menuSelectKey: key});
        if (this.props.onMenuClick) {
            this.props.onMenuClick({item, key})
        }
    };


    render() {
        let {userInfo} = this.state;
        return (
            <>
                <Header style={{zIndex: 100, width: '100%',padding:0}}>
                    <Row justify="space-between">
                        {/*<Col span={2}>*/}
                        {/*    <div className="ant-pro-sider-logo" id="logo">*/}
                        {/*        <a><img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"*/}
                        {/*                alt="logo"/>*/}
                        {/*            <h1>Generator</h1>*/}
                        {/*        </a>*/}
                        {/*    </div>*/}
                        {/*</Col>*/}
                        <Col span={18}>
                            <Menu theme="dark" mode="horizontal"
                                  onClick={this.onMenuClick}
                                  selectedKeys={this.state.menuSelectKey}>
                                {
                                    this.state.menuKeys.map((item => {
                                        return <Menu.Item key={item.key}>
                                            {item.name}
                                        </Menu.Item>
                                    }))
                                }
                            </Menu>
                        </Col>
                        <Col span={4}>
                            <Row gutter={24} justify="end" align="middle">
                                <Col>
                                    <Dropdown placement="bottomLeft" overlay={
                                        <Menu className="use-menu">
                                            <Menu.Item key="1">
                                                <Link to="/setting/personal"><SettingOutlined/>个人设置</Link>
                                            </Menu.Item>
                                            <Menu.Divider/>
                                            <Menu.Item key="2" onClick={this.loginOut.bind(this)}>
                                                <LoginOutlined/>
                                                <span>退出登录</span>
                                            </Menu.Item>
                                        </Menu>
                                    }>
                                        <Text className="avatar-box">
                                            <Badge>
                                                <Avatar size="small"
                                                        src={userInfo.photo}/><Text
                                                className="padding-left05">{userInfo.name}</Text>
                                            </Badge>
                                        </Text>
                                    </Dropdown>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                </Header>
            </>
        )
            ;

    }

    _initActiveMenu() {
        let basename = this.getRouterBaseName() || '';
        if (!basename) {
            basename = '/';
        }
        let pathname = window.location.pathname;
        if (pathname === basename || pathname === basename + '/') {

        } else {
            if (basename !== '' && basename !== '/') {
                pathname = pathname.replace(basename, '');
            }
            this.state.menuKeys.map((value => {
                if (pathname.indexOf(value.key) !== -1) {
                    this.setState({menuSelectKey: value.key});
                }
            }))
        }
    }
}